<script setup>
import { ref, onMounted } from 'vue'
import BaseStation from '../components/BaseStation.vue'
import routingDataJson from '../data/data.json'
const routingData = ref(routingDataJson);

const activeName = ref('first')
const subCount = ref(0)

const guidaoColor = '#778899'
const pathColor = '#32CD32';
const theme = ref('light');
const previewStation = ref({});
const previewStationIndex = ref(0);
const showPreviewStation = ref(false)

const selectStation = (item, index) => {
    previewStation.value = item;
    previewStationIndex.value = index;
    showPreviewStation.value = true;
}

const initList = () => {
    let count = parseInt((window.innerWidth - 10) / 500)
    subCount.value = count - (routingData.value.length - count * (parseInt(routingData.value.length / count)))
}

const handleClick = (e) => {

}

onMounted(() => {
    initList()
    window.addEventListener('resize', () => {
        initList()
    })
})

</script>

<template>
    <div class="setting">
        <h4 style="padding-left: 20px;">基础站型总数：{{ routingData.length }}； 点击站型后选择交路可查看交路路径</h4>
        <div class="stationList">
            <div @click="selectStation(item, index)" class="stationItem" v-for="(item, index) in routingData" :key="index">
                <BaseStation :not-show-setting="true" class="model" :id-name="'temp' + index" :station-name="item.name"
                    :routing-data="item" />
            </div>
            <div class="stationItem" v-for="item in subCount" :key="item"></div>
        </div>

        <el-dialog :destroy-on-close="true" width="50%" title="站型查看" v-model="showPreviewStation">
            <BaseStation :not-show-setting="false" :not-show-setting-btn="true" class="model"
                :id-name="'preview' + previewStationIndex" :station-name="previewStation.name"
                :routing-data="previewStation" />
        </el-dialog>
    </div>
</template>

<style scoped>
.setting {
    padding: 10px 0;
    height: calc(100vh - 80px);
}

.stationList {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 140px);
    overflow: auto;
    justify-content: space-around;
}

.toolbar {
    border-bottom: 1px solid var(--el-color-info-light-5);
    padding-bottom: 10px;
}

.stationItem {
    width: 500px;
    margin: 10px;
    cursor: pointer;
}
</style>